<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="1080" height="630" style="border: 1px solid;"></canvas>
</body>

</html>
<script>

    const ctx = myCanvas.getContext('2d');

    let p1 = [150, 300];
    let p2 = [850, 300];
    let c1 = [400, 150];
    let c2 = [600, 400];

    /**
 * 在一段三次贝塞尔曲线上均匀取点, 不包括终点
 * @param counts 一段贝塞尔曲线中取点的数量
 */
    getPntsOf3Bezier = function (p0, p1, p2, p3, counts) {
        let per = counts && counts != 0 ? 1 / counts : 0.02;    //取点间隔
        let points = [];
        for (let t = 0; t <= 0.999999; t += per) {
            points.push(getPntIn3Bezier(p0, p1, p2, p3, t));
        }
        return points;
    };

    /**
     * 获取三次贝塞尔曲线上的一点，t∈[0,1]
     * @param t 介于0 ~ 1, 表示点在曲线中的相对位置
     */
    getPntIn3Bezier = function (p0, p1, p2, p3, t) {
        let t_ = 1 - t;
        let x = p0[0] * t_ * t_ * t_ + 3 * p1[0] * t * t_ * t_ + 3 * p2[0] * t * t * t_ + p3[0] * t * t * t,
            y = p0[1] * t_ * t_ * t_ + 3 * p1[1] * t * t_ * t_ + 3 * p2[1] * t * t * t_ + p3[1] * t * t * t;
        return [x, y];
    };

    let points = getPntsOf3Bezier(p1, c1, c2, p2, 100);
    console.log(points);
    points.forEach((p, i) => {
        if (i == 0) {
            ctx.moveTo(p[0], p[1]);
        } else {
            ctx.lineTo(p[0], p[1]);
        }
    })
    ctx.font = "18px serif";
    ctx.lineWidth = 5;
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.arc(c1[0], c1[1], 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("控制点1", c1[0]+10, c1[1]);

    ctx.fillStyle = "blue";
    ctx.arc(c2[0], c2[1], 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("控制点2", c2[0]+10, c2[1]);


</script>
<style>
    canvas {
        border: 1px solid #ccc;
        background-image: linear-gradient(90deg,
                #ffffb8 1%,
                rgba(0, 0, 0, 0) 5%),
            linear-gradient(#ffffb8 1%, rgba(0, 0, 0, 0) 5%);
        background-size: 28px 28px;
    }
</style>